import './style.css'
import {IconArrowBackIos, IconArrowForwardIos, IconSearchFill} from "../../icons/index.js";
import Avatar from './assets/avatar.jpg';

export function headerRender() {
    return `
<div class="header row align-items-center">
    <div class="col-auto">
      ${IconArrowBackIos({size: 16})}
    </div>
    <div class="col-auto" style="margin-left: 8px">
      ${IconArrowForwardIos({size: 16})}
    </div>
    <div class="col"></div>
    <div class="col-auto">
      <div class="search-input">
        <div class="search-input-icon">
          ${IconSearchFill({size: 24})}
        </div>
        <input placeholder="歌手、歌曲或专辑名"/>
      </div>
    </div>
    <div class="col-auto" style="margin-left: 16px">
      <img class="avatar" src="${Avatar}"/>
    </div>
</div>
`
}
